<!--
  Licensed to the Apache Software Foundation (ASF) under one or more
  contributor license agreements.  See the NOTICE file distributed with
  this work for additional information regarding copyright ownership.
  The ASF licenses this file to You under the Apache License, Version 2.0
  (the "License"); you may not use this file except in compliance with
  the License.  You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Chat Example Using MQTT Over WebSockets</title>
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        body { padding-top: 40px; }
    </style>
</head>

<body>

<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="brand" href="#">ActiveMQ MQTT WebSocket Chat Example</a>
        </div>
    </div>
</div>

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span6">
            <div id="connect">
                <div class="page-header">
                    <h2>Server Login</h2>
                </div>
                <form class="form-horizontal" id='connect_form'>
                    <fieldset>
                        <div class="control-group">
                            <label>Host</label>
                            <div class="controls">
                                <input name=host id='connect_host' value='172.16.200.10' type="text">
                            </div>
                        </div>
                        <div class="control-group">
                            <label>Port</label>
                            <div class="controls">
                                <input name=url id='connect_port' value='8083' type="text">
                            </div>
                        </div>
                        <div class="control-group">
                            <label>Client ID</label>
                            <div class="controls">
                                <input id='connect_clientId' placeholder="id" value="example" type="text">
                            </div>
                        </div>
                        <div class="control-group">
                            <label>User ID</label>
                            <div class="controls">
                                <input id='connect_user' placeholder="User ID" value="admin" type="text">
                            </div>
                        </div>
                        <div class="control-group">
                            <label>Password</label>
                            <div class="controls">
                                <input id='connect_password' placeholder="User Password" value="password" type="password">
                            </div>
                        </div>
                        <div class="control-group">
                            <label>Topic</label>
                            <div class="controls">
                                <input id='destination' placeholder="Destination" value="" type="text">
                            </div>
                        </div>
                        <div class="form-actions">
                            <button id='connect_submit' type="submit" class="btn btn-large btn-primary">Connect</button>
                        </div>
                    </fieldset>
                </form>
            </div>
            <div id="connected" style="display:none">
                <div class="page-header">
                    <h2>Chat Room</h2>
                </div>
                <div id="messages">
                </div>
                <form class="well form-search" id='send_form'>
                    <button class="btn" type="button" id='disconnect' style="float:right">Disconnect</button>
                    <input class="input-medium" id='send_form_input' placeholder="Type your message here" class="span6"/>
                    <button class="btn" type="submit">Send</button>
                </form>
            </div>
        </div>
        <div class="span4">
            <div class="page-header">
                <h2>Debug Log</h2>
            </div>
            <pre id="debug"></pre>
        </div>
    </div>
</div>

<!-- Scripts placed at the end of the document so the pages load faster -->
<script src=""/static/js/jquery.min.js"></script>
<script src="/static/js/mqttws31.js"></script>
<script>//<![CDATA[
$(document).ready(function(){

    $("#connect_clientId").val("example-"+(Math.floor(Math.random() * 100000)));
    if( !window.WebSocket) {
        $("#connect").html("\
        <h1>Get a new Web Browser!</h1>\
        <p>\
        Your browser does not support WebSockets. This example will not work properly.<br>\
        Please use a Web Browser with WebSockets support (WebKit or Google Chrome).\
        </p>\
    ");
    } else {

        var client, destination;

        $('#connect_form').submit(function() {
            var host = $("#connect_host").val();
            var port = $("#connect_port").val();
            var clientId = $("#connect_clientId").val();
            var user = $("#connect_user").val();
            var password = $("#connect_password").val();

            destination = $("#destination").val();

            client = new Messaging.Client(host, Number(port), clientId);

            //在消息到达
            client.onMessageArrived = function (message) {
                var p = document.createElement("p");
                var t = document.createTextNode(message.payloadString);
                p.appendChild(t);
                $("#messages").append(p);
            };
            //在连接丢失
            client.onConnectionLost = function (responseObject) {
                if (responseObject.errorCode !== 0) {
                    debug(client.clientId + ": " + responseObject.errorCode + "\n");
                }
            };

            client.connect({
                userName:user,
                password:password,
                onSuccess:function(frame) {
                    debug("connected to MQTT");
                    $('#connect').fadeOut({ duration: 'fast' });
                    $('#connected').fadeIn();
                    client.subscribe(destination);
                },
                onFailure: function (failure) {
                    debug("failure");
                    debug(failure.errorMessage);
                }
            });
            return false;
        });

        //这允许在web页面上直接显示调试日志。
        var debug = function(str) {
            $("#debug").append(document.createTextNode(str + "\n"));
        };

        $('#disconnect').click(function() {
            client.disconnect();
            $('#connected').fadeOut({ duration: 'fast' });
            $('#connect').fadeIn();
            $("#messages").html("")
            return false;
        });

        $('#send_form').submit(function() {
            var text = $('#send_form_input').val();
            if (text) {
                message = new Messaging.Message(text);
                message.destinationName = destination;
                client.send(message);
                $('#send_form_input').val("");
            }
            return false;
        });
    }
});
//]]></script>

</body>
</html>